<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <form action="" method="get">
        <input type="text" name="username" class="user">
        <br>
        <input type="text" name="password" class="pwd">
        <br>
        <!-- 必须在form标签中 -->
        <input type="reset" value="重置">
        <input type="submit" value="提交">
    </form>


    <script>

        // 表单事件
        //   submit 提交事件    是一个默认事件
        //   focus  获取焦点
        //   blur   失去焦点
        //   input  输入中
        //   change 失去焦点且发生改变


        // 表单的方法
        //   focus()
        //   blur()


        // var oForm = document.querySelector('form') ;
        // oForm.onsubmit = function(e) {
        //     // alert(111)   // 阻止表单提交、
        //     // 阻止默认事件   prevent阻止   default 默认
        //     e.preventDefault() ;
        // }


        var oUser = document.querySelector('.user') ;
        var oPwd = document.querySelector('.pwd') ;
        oUser.onfocus = function() {
            console.log(333);
            this.style.color = 'red'
        }


        // 先有获取焦点，才存在失去焦点
        oUser.onblur = function() {
            console.log(333);
            var name = this.value ;
            if(name === '') {
                alert('用户名不能为空')
            }
        }


        // 输入事件   一边输入一边触发事件
        oUser.oninput = function() {
            console.log(1);
            if(this.value.length >= 3) {
                // this.blur() ;
                oPwd.focus();
            }
        }


        // 失去焦点且发生改变
        oUser.onchange = function() {
            console.log(2);
        }




        oUser.focus();




    </script>
    
</body>
</html>